<!DOCTYPE html>
<html>
<head>
{include file="common/head"}
<style type="text/css">
.layui-form-module .layui-form-label {
    float: none;
    width: auto;
    text-align: left;
    padding: 9px 0px;
}
.layui-form-module .layui-input-block, .layui-form-module .layui-input-inline{
    margin-left: 0px;
}
</style>
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
</head>
{include file="common/header"}
<body style="background-color: #f2f2f2;">
<div class="layui-container" style="margin-top: 80px;">
  <div class="layui-row layui-col-space15">
    <div class="layui-col-md12">
    
      <div class="layui-card">
        <div class="layui-card-header">发布文章</div>
        <div class="layui-card-body">
      <form class="layui-form layui-form-module" action="{:url('wendasns/article/post')}" method="post">
        <input type="hidden" name="id" value="{$article.id}">
        <input type="hidden" name="category" value="{$article.category_id}" lay-verify="category">
        
        <div class="layui-form-item">
          <label class="layui-form-label">标题</label>
          <div class="layui-input-block">
            <input type="text" name="title" lay-verify="required" autocomplete="off" class="layui-input" value="{$article.title}">
          </div>
        </div>

        <div class="layui-form-item">
          <label class="layui-form-label">摘要</label>
          <div class="layui-input-block">
            <textarea name="summary" class="layui-textarea">{$article.summary}</textarea>
          </div>
          <div class="layui-form-mid layui-word-aux">如果不设置摘要，系统会自动截取正文内容前80个字作为摘要</div>
        </div>

        <div class="layui-form-item">
          <label class="layui-form-label">封面图</label>
          <div class="layui-input-inline">
          	<input type="hidden" name="cover" placeholder="封面图片地址" value="{$article.cover}" autocomplete="off" class="layui-input id_card_image">
            {if empty($article.cover) eq false}
            <img src="{$article.cover}" class="imgtags" style="width: 190px;height: 108px;"/>
            {else}
            <img src="{:url('image/static/cover',[],'gif')}" class="imgtags" style="width: 190px;height: 108px;"/>
            {/if}
          </div>
          <div class="layui-form-mid layui-word-aux">
              <a href="javascript:;" class="layui-btn layui-btn-primary J_mous_img" lay-data="{ url:'{:url('wendasns/user/upload')}',size:3072}"><i class="layui-icon layui-icon-upload-drag"></i>上传封面图片</a><br>
              1.图片大小建议 200x200<br>
              2.照片要求格式为JPG/JPEG/GIF/PNG，大小不要超过2M<br>
              3.如果不设置封面，系统会自动截取正文内容里第一张图作为封面
          </div>
        </div>
        
        <div class="layui-form-item">
          <label class="layui-form-label">内容</label>
          <div class="layui-input-block">
            <textarea id="article-text" name="content" style="display: none;" lay-verify="content" data-id="">{$article.content}</textarea>
          </div>
          
        </div>
        
        <div class="layui-form-item">
          <label class="layui-form-label">分类</label>
          <div class="layui-input-block">
          	<div class="layui-inline">
          	{~$category_id = 0}
          	{if isset($article.category_id)}{~$category_id = $article.category_id}{/if}
	            <select lay-filter="classopt">
	            	{if $category_id}
	            		<option value="{$article.category_id}">{$article.categorys.name}</option>
	            	{else}
	            		<option value="">请选择</option>
	            	{/if}
	            	
	            {volist name="category" id="item"}
	            	{if $item.id neq $category_id}
	              <option value="{$item.id}"{if isset($article) && $article.category_id eq $item.id} selected{/if}>{$item.name|raw}</option>
	              	{/if}
	            {/volist}
	            </select>
            </div>
          </div>
          <div class="layui-form-mid layui-word-aux" id="classshow"></div>
        </div>

        <div class="layui-form-item">
          <label class="layui-form-label">标签</label>
          <div class="layui-input-block">
          	<input type="hidden" name="tags" value="" lay-verify="tags">
            <select id="tags_select" class="js-example-tokenizer" multiple="multiple" style="width: 100%;display: none;">
            {if isset($article.tags)}
            	{volist name=":explode(',',$article.tags)" id="item"}
            	<option selected="{$item}">{$item}</option>
            	{/volist}
            {/if}
            </select>
          </div>
        </div>
        
        <div class="layui-form-item">
          <label class="layui-form-label">允许评论</label>
          <div class="layui-input-block">
            <input type="radio" name="speak" title="是" value="1" {if isset($article.speak)}{$article.speak==1?'checked':''}{else}checked{/if}>
            <input type="radio" name="speak" title="否" value="0" {if isset($article.speak) and $article.speak eq 0}checked{/if}>
          </div>
        </div>
        
        {:hook('article_post_form_item')}
        
        <div class="layui-form-item">
          <div class="layui-input-block">
              <button class="layui-btn" lay-submit="" lay-filter="J_ajax_submit_btn">提交</button>
          </div>
        </div>
        
          </form>
        </div>
      </div>
      
    </div>
    
  </div>
</div>
{include file="common/footer"}
<script src="/ueditor/ueditor.init.js?v={:time()}"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<script>
layui.use([],function(){

  var $ = layui.$
  ,layedit = layui.layedit
  ,form = layui.form;
  
	layedit.set({
	  uploadImage: {
	    url: '{:url('wendasns/common/upload',['type'=>'article'])}'
	  },
	  height: 300
	});

	var index = layedit.build('article-text');
	$('#article-text').attr('data-id',index);
  
  form.verify({
    content: function(value){
    	value = layedit.getText(index);
      if(value.length == 0){
        return '请编写文章内容';
      }
    },
    tags: function(value){
		var arr = [];
		$('#tags_select').find('option').each(function(){
			arr.push($(this).val());
		});
		value = arr.join(',');
		$('input[name="tags"]').val(value);
		
    	if(value.length == 0){
    		return '请设置标签';
    	}
    },
    category: function(value){
    	if(value.length == 0){
    		return '请设置分类';
    	}
    }
  });
    
  $(document).scroll(function(){
    var scroH = $(document).scrollTop();  //滚动高度
    if(scroH >65){
      $('header').fadeOut('slow');
    }else{
      $('header').fadeIn('slow');
    }
  });

	form.on('select(classopt)', function(data){

		$('input[name="category"]').val(data.value);
		$('#classshow').text($(data.elem).find("option:selected").text());
		var next = $(data.elem).parent('div.layui-inline').next();
		if(next.length>0){
			if(data.value==next.data('pid')){
				return;
			}
			$(data.elem).parent('div.layui-inline').nextAll().remove();
		}
		if(data.value==''){
			return;
		}

	  $.get('{:url('wendasns/api/getclass')}',{id:data.value,type:'article'},function(res){
	  	if(res.data.length>0){
		  	var option = '<div class="layui-inline" data-pid="'+ data.value +'"><select lay-filter="classopt"><option value="">请选择</option>';
		  	$.each(res.data,function(index,item){
		  		option += '<option value="'+ this.id +'">'+ this.name +'</option>';
		  	});
		  	option += '</select></div>';
		  	$(data.elem).parent('div.layui-inline').parent('div.layui-input-block').append(option);
		  	form.render('select');
		  	$('#tags_select').next().remove();
	  	}
	  },'json');
	  
	});

	$('.js-example-tokenizer').select2({ 
	    tags: true , 
	    tokenSeparators: [ ',' , ' ' ]
	});
	
	$('.select2').next().remove();
});
</script>
{:hook('article_post_bottom_extra')}
</body>
</html>